<template>
    <div class="usercenter">
        <div class="header">
            <div class="header_title">
                <div class="title_avatar">
                    <img :src="LoginUser.avatar_text" alt="">
                </div>
                <div class="title_content">
                    <div class="content_text">{{ LoginUser.nickname }}</div>
                    <div class="content_sm">{{ LoginUser.createtime }}</div>
                </div>
            </div>
            <div class="operate">
                <div class="text-sm">
                    <span class="text-bold">0</span>
                    收藏夹
                </div>
                <div class="text-sm">
                    <span class="text-bold">0</span>
                    关注店铺
                </div>
                <div class="text-sm">
                    <span class="text-bold">0</span>
                    足迹
                </div>
                <div class="text-sm">
                    <span class="text-bold">0</span>
                    全部订单
                </div>
            </div>
        </div>
        <div class="userorder">
            <div class="order_project">
                <div class="item">
                    <router-link to="/order/index" class="item">
                        <div class="img">
                            <img src="/assets/images/order1.png" alt="">
                        </div>
                        待支付
                    </router-link>
                </div>
                <div class="item" v-for="item in ordrlist" :key="item.id">
                    <router-link to="/order/index" class="item">
                        <div class="img">
                            <img :src="item.src" alt="">
                        </div>
                        {{ item.name }}
                    </router-link>
                </div>
            </div>
        </div>
        <div class="userorder">
            <div class="order_project">
                <div class="item">
                    <router-link to="/business/poster" class="item">
                        <div class="img"> <img src="/assets/images/retail1.png" alt=""></div>
                        分销信息
                    </router-link>
                </div>
                <div class="item">
                    <router-link to="/business/retailmember" class="item">
                        <div class="img"> <img src="/assets/images/retail2.png" alt=""></div>
                        分销会员
                    </router-link>
                </div>
                <div class="item">
                    <router-link to="/business/kickback" class="item">
                        <div class="img"> <img src="/assets/images/retail3.png" alt=""></div>
                        分销佣金
                    </router-link>
                </div>
                <div class="item">
                    <!-- <router-link to="/coupon/index" class="item"> -->
                    <router-link to="/business/coupon" class="item">
                        <div class="img"> <img src="/assets/images/coupon.png" alt=""></div>
                        优惠列表
                    </router-link>
                </div>
                <div class="item solid-left">
                    <a href="deposit.html" class="item">
                        <div class="img"> <img src="/assets/images/recharge2.png" alt=""></div>
                        充值中心
                    </a>
                </div>
            </div>
        </div>
        <div class="usertool">
            <div class="list">
                <div class="item" v-for="item in menulist">
                    <a href="javascript:void(0)" @click="toPages(item)">
                        <div class="img">
                            <img :src="item.src" alt="">
                        </div>
                        {{ item.name }}
                    </a>
                </div>
                <div class="item">
                    <a href="javascript:void(0)" @click="logout">
                        <div class="img"> <img src="/assets/images/returns.png" alt=""></div>
                        退出登陆
                    </a>
                </div>
            </div>
        </div>
        <div class="usertool">
            <ul class="proul">
                <li>
                    <a href="detail.html"><img src="/assets/images/7.jpg" /></a>
                    <a href="detail.html">
                        <p class="tit">北欧轻奢餐椅家用现代简约新中式洽谈酒店皮革软包餐厅椅子靠背椅</p>
                    </a>
                    <div class="price">
                        <p>￥2998</p>
                    </div>
                </li>
                <li>
                    <a href="detail.html"><img src="/assets/images/4.jpg" /></a>
                    <a href="detail.html">
                        <p class="tit">松兰宾利实木餐桌椅组合后现代轻奢长方形大户型不锈钢8人饭桌</p>
                    </a>
                    <div class="price">
                        <p>￥998</p>
                    </div>
                </li>
                <li>
                    <a href="detail.html"><img src="/assets/images/5.jpg" /></a>
                    <a href="detail.html">
                        <p class="tit">卫生间洗手台柜面池洗睑台式壁挂台盆架瓷盥洗池饭店小号挂盆经济</p>
                    </a>
                    <div class="price">
                        <p>￥368</p>
                    </div>
                </li>
                <li>
                    <a href="detail.html"><img src="/assets/images/6.jpg" /></a>
                    <a href="detail.html">
                        <p class="tit">布艺床主卧大床双人床港式轻奢ins网红床卧室北欧家具床现代简约</p>
                    </a>
                    <div class="price">
                        <p>￥3998</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="h54"></div>
        <div class="clear"></div>
    </div>
    <Footer />
</template>
<script setup>
import Footer from '@/components/common/footer.vue';
const { proxy } = getCurrentInstance()
const LoginUser = reactive(proxy.$cookies.get('LoginUser') ?? {})
const menulist = [
    {
        id: 1,
        name: '基本资料',
        src: '/assets/images/profile.png',
        url: '/business/profile'
    },
    {
        id: 2,
        name: '拼团订单',
        src: '/assets/images/pingtuan.png',
        url: ''
    },
    {
        id: 3,
        name: '收货地址',
        src: '/assets/images/address.png',
        url: '/address/index'
    },
    {
        id: 4,
        name: '邮箱认证',
        src: '/assets/images/email.png',
        url: '/business/email',
    },
    {
        id: 5,
        name: '消费记录',
        src: '/assets/images/consume.png',
        url: '/business/record'
    },
    {
        id: 6,
        name: '充值记录',
        src: '/assets/images/recharge1.png',
        url: ''
    },
]


const ordrlist = [
    {
        name: '待支付',
        src: '/assets/images/order1.png'
    },
    {
        name: '待发货',
        src: '/assets/images/order2.png'
    },
    {
        name: '待收货',
        src: '/assets/images/order3.png'
    },
    {
        name: '待评价',
        src: '/assets/images/order4.png'
    },
    {
        name: '退货/售后',
        src: '/assets/images/returns.png'
    }
]

const logout = async () => {
    Dialog({
        title: '退出',
        message:
            '确认是否退出登陆?',
    })
        .then(() => {
            toast('退出成功')
            proxy.$cookies.remove("LoginUser");
            proxy.$router.push('/business/login')
        })
        .catch(() => { });
}
const toPages = (val) => {
    if (val.id == 4 && LoginUser.auth == '1') {
        toast('邮箱已认证，无需要重复认证');
        return false;
    }
    else {
        proxy.$router.push(val.url)
    }
}
</script>
<style>
@import url('/assets/css/my.css');
</style>